/*
 * @Author: 涵崽
 * @Date: 2023-11-10 10:14:38
 * @email: 1045654@qq.com
 * @gitee: https://gitee.com/han-zai
 * @LastEditors: 涵崽
 * @LastEditTime: 2023-11-10 15:47:39
 * @Description:  一键复制
 * 需求：实现一键复制文本内容，用于鼠标右键粘贴。
思路：
1、动态创建 textarea 标签，并设置 readOnly 属性及移出可视区域
2、将要复制的值赋给 textarea 标签的 value 属性，并插入到 body
3、选中值 textarea 并复制
4、将 body 中插入的 textarea 移除
5、在第一次调用时绑定事件，在解绑时移除事件

使用：给 Dom 加上 v-copy 及复制的文本即可

<div v-copy> 单击复制 </div>
<div v-copy.dblclick> 双击复制 </div>
<div v-copy.icon> icon复制 </div>

 */
const copy = {
  bind(el, binding) {
    // 双击触发复制
    if (binding.modifiers.dblclick) {
      el.addEventListener("dblclick", () => handleClick(el.innerText));
      el.style.cursor = "copy";
    }
    // 点击icon触发复制
    else if (binding.modifiers.icon) {
      if (el.hasIcon) return;
      const iconElement = document.createElement("i");
      iconElement.setAttribute("class", "el-icon-document-copy");
      iconElement.setAttribute("style", "margin-left:5px");
      el.appendChild(iconElement);
      el.hasIcon = true;
      iconElement.addEventListener("click", () => handleClick(el.innerText));
      iconElement.style.cursor = "copy";
    }
    // 单击触发复制
    else {
      el.addEventListener("click", () => handleClick(el.innerText));
      el.style.cursor = "copy";
    }
  },
};

function handleClick(text) {
  // 创建元素
  if (!document.getElementById("copyTarget")) {
    const copyTarget = document.createElement("input");
    copyTarget.setAttribute(
      "style",
      "position:fixed;top:0;left:0;opacity:0;z-index:-1000;"
    );
    copyTarget.setAttribute("id", "copyTarget");
    document.body.appendChild(copyTarget);
  }

  // 复制内容
  const input = document.getElementById("copyTarget");
  input.value = text;
  input.select();
  document.execCommand("copy");
  // alert('复制成功')
}
export default copy;
